<!DOCTYPE HTML>
<html class="no-js" lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="theme/kying/common :: head(~{::title})">
    <title th:text="|关于我 - ${webname} - 万物皆有裂痕 那是光照进来的地方|"></title>
    <!-- 使用url函数转换相关路径 -->
</head>
<body>
<span th:replace="theme/kying/common :: nav"></span>

<div id="pjax-container">
    <style>
        #header {
            height: 70vh;
        }

        @media (max-width: 768px) {
            #header {
                height: 40vh;
            }
        }

        #site-meta {
            display: none;
        }
    </style>
    <header id="header" class="clearfix animated fadeInDown">
        <div id="site-meta">
            <h1 id="site-name" th:text="${webname}">San'Sui Blog</h1>
            <h2 id="site-description" th:text="${webTitle}">San'Sui Blog</h2>
        </div>
        <div id="background"></div>
    </header><!-- end #header -->
    <div id="body" class="animated fadeIn">
        <div class="container">
            <div class="row">
                <div id="main" class="col-mb-12 col-8 col-offset-2">
                    <article class="post">
                        <div class="post-header">
                            <h3 class="post-title">
                                <a class="post-link">关于我</a></h3>
                        </div>
                        <div class="post-body">
                            <div class="post-content">

                                <div class="about-detail">
                                    <div class="about-content"><h2 id="介绍">介绍</h2>
                                        <p>🍞 一枚不知名的小程序猿,爱钻研、爱折腾技术的开发者。</p>
                                        <h2 id="座右铭">座右铭</h2>
                                        <p>🎨 永远相信美好的事情即将发生</p>
                                        <h2 id="爱好">爱好</h2>
                                        <p>💻 敲代码、📖 看书、🎮 打游戏</p>
                                        <h2 id="联系方式">联系方式</h2>
                                        <p>📧 邮箱：1578393930@qq.com</p>
                                        <p>✍️微信/QQ: 1578393930</p>
                                        <!--                                        <p>🦜 ️微信：</p>-->
                                        <h2 id="关于博客">关于博客</h2>
                                        <p>原先使用 WordPress 搭建博客平台，感觉拥有一个可以自定制的博客系统超级酷。于是便萌生了自己开源一个的想法。</p>
                                        <p>趁着工作闲暇之余，开发了这套博客系统，中间也借鉴了很多博主的博客，也学习了很多内容,还有很多的不足需要继续努力。博客命名为 <a
                                                href="https://gitee.com/wyq517/sansui-blog"
                                                target="_blank">sansui-blog</a>
                                            （用自己的网名的缩写,很俗气）。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>

                    <div id="comments">
                        <div id="comment-container" th:fragment="commentList">
                            <span id="response">
                                <p>
                                    <i class="iconfont icon-aria-comment"></i>
                                    <span th:text="${commentNum}"></span> 条评论
                                </p>
                            </span>
                            <!--评论内容-->
                            <div class="comment-data">
                                <ol class="comment-list" th:each="comment : ${comments}">
                                    <li th:id="'li-comment-'+${comment.commentid}" class="comment-body comment-parent comment-odd">
                                        <div th:id="'comment-'+${comment.commentid}">
                                            <a class="comment-avatar" href="#" target="_blank" th:href="${comment.url}">
                                                <img class="avatar" src="" th:src="@{${comment.avatar}}" alt="White" width="120" height="120"/>
                                            </a>
                                            <div class="comment-content">
                                                <div class="comment-text">
                                                    <span class="comment-reply" style="float:right">
                                                        <a rel="nofollow" title="回复" class="reply" data-commentid="1" data-commentnickname="sansui"
                                                           th:attr="data-commentid=${comment.commentid},data-commentnickname=${comment.nickname}"
                                                           onclick="reply(this)">
                                                            <i class="iconfont icon-aria-reply"></i>
                                                        </a>
                                                    </span>
                                                    <p><p th:text="${comment.comment}">评论内容</p></p>
                                                </div>
                                                <p class="comment-meta">
                                                    By <span>
                                                    <a href="#" th:href="${comment.url}" rel="external nofollow" target="_blank" th:text="${comment.nickname}">sansui</a>
                                                </span>
                                                    <!--评论时间-->
                                                    <span th:text="${#dates.format(comment.createtime,'yyyy-MM-dd HH:mm')}"></span>
                                                    <span class="comment-ua">
                                                            来自 <span th:text="${comment.sourcecity}">火星</span>
                                                    </span>
                                                </p>
                                            </div>
                                        </div><!-- 单条评论者信息及内容 -->

                                        <!--子评论-->
                                        <div class="comment-children" th:if="${#arrays.length(comment.replyComments)}>0">
                                            <ol class="comment-list" th:each="reply : ${comment.replyComments}">
                                                <li th:id="'li-comment-'+${reply.commentid}" th:classappend="${reply.admincomment} ? 'comment-by-author'" class="comment-body comment-child comment-level-odd comment-odd">
                                                    <div th:id="'comment-'+${reply.commentid}">
                                                        <a class="comment-avatar" href="#" target="_blank" th:href="${reply.url}">
                                                            <img class="avatar" th:src="@{${reply.avatar}}" src="#" alt="sansui" width="120" height="120"/>
                                                        </a>
                                                        <div class="comment-content">
                                                            <div class="comment-text">
                                                                <span class="comment-reply" style="float:right">
                                                                    <a class="reply" rel="nofollow" data-commentid="1"
                                                                       title="回复"
                                                                       data-commentnickname="Matt"
                                                                       th:attr="data-commentid=${reply.commentid},data-commentnickname=${reply.nickname}"
                                                                       onclick="reply(this)">
                                                                        <i class="iconfont icon-aria-reply"></i>
                                                                    </a>
                                                                </span>
                                                                <p>
                                                                    <a href="#comment-5" th:href="'#comment-'+${comment.commentid}" >
                                                                        <span th:text="|@ ${reply.parentnickname}|">@小白</span>
                                                                    </a>
                                                                    <br>
                                                                <p th:text="${reply.comment}">评论内容</p>
                                                                </p>
                                                            </div>
                                                            <p class="comment-meta">By
                                                                <span>
                                                                    <a href="#" th:href="${reply.url}" rel="external nofollow" target="_blank" th:text="${reply.nickname}">sansui</a>
                                                                </span>
                                                                <span th:text="${#dates.format(reply.createtime,'yyyy-MM-dd HH:mm')}"></span>
                                                                <!--                                                                <span class="comment-ua">-->
                                                                <!--                                                                    <i class="iconfont icon-aria-windows"></i>&nbsp;-->
                                                                <!--                                                                    <i class="iconfont icon-aria-chrome"></i>-->
                                                                <!--                                                                </span>-->
                                                                <span class="comment-ua">
                                                                    来自 <span th:text="${reply.sourcecity}">火星</span>
                                                                </span>
                                                            </p>
                                                        </div>
                                                    </div><!-- 单条评论者信息及内容 -->
                                                </li>
                                            </ol>
                                        </div><!--子评论结束-->
                                    </li>
                                </ol>
                            </div>
                        </div><!--评论内容区域结束-->

                        <div id="page-nav">
                        </div>

                        <div id="comment-form-1" class="respond">
                            <div class="cancel-comment-reply">
                                <a id="cancel-comment-reply-link"
                                   rel="nofollow"
                                   title="清空"
                                   style="display:none"
                                   onclick="cancelReply()">
                                    <i class="iconfont icon-aria-cancel"></i>
                                </a>
                            </div>

                            <input type="hidden" name="blogId" value="-999">
                            <input type="hidden" name="parentComment.id" value="-1">
                            <span id="new-response">
                                <i class="iconfont icon-aria-write"></i> 添加新评论
                            </span>
                            <!-- New Comments begin -->
                            <div id="comment-form" role="form">
                                <div id="comment-info">
                                    <p>
                                        <img no-lazyload id="commentavatar" th:src="${session.user}!=null?@{${userInfo.avatars}}:@{/images/avatar.svg}" src="#">
                                    </p>
                                    <p class="comment-input">
                                        <label for="commentQQ"
                                               class="required">
                                            <i class="iconfont icon-aria-qq"></i>
                                        </label>
                                        <input placeholder="（必填）QQ"
                                               type="text"
                                               name="qq"
                                               id="commentQQ"
                                               class="text"
                                               value=""
                                               th:id="${session.user}!=null?'':'commentQQ'" th:value="${session.user}!=null ? ${userInfo.qq}"
                                               required/>
                                    </p>
                                    <p class="comment-input">
                                        <label for="nickname"
                                               class="required">
                                            <i class="iconfont icon-aria-username"></i>
                                        </label>
                                        <input placeholder="（必填）昵称"
                                               type="text"
                                               name="nickname"
                                               id="nickname"
                                               class="text"
                                               th:value="${session.user}!=null ? ${userInfo.nickname}"
                                               value=""
                                               required/>
                                    </p>
                                    <p class="comment-input">
                                        <label for="email"
                                               class="required">
                                            <i class="iconfont icon-aria-email"></i>
                                        </label>
                                        <input placeholder="（必填）邮箱"
                                               type="email"
                                               name="email"
                                               id="email"
                                               class="text"
                                               th:value="${session.user}!=null ? ${userInfo.email}"
                                               value=""
                                               required>
                                    </p>
                                    <p class="comment-input">
                                        <label for="url">
                                            <i class="iconfont icon-aria-link"></i>
                                        </label>
                                        <input type="url"
                                               name="url"
                                               id="url"
                                               class="text"
                                               placeholder="（选填）网站"
                                               value=""/>
                                    </p>
                                </div>
                                <div style="float:right">
                                    <i class="iconfont icon-aria-markdown"></i>
                                    <span style="font-style:italic;font-size:13px;color:#444"> Markdown is supported.</span>
                                </div>
                                <!--评论框-->
                                <div class="field">
                                    <textarea name="comment" id="comment" placeholder="「你的评论可以一针见血...」"></textarea>
                                </div>
                                <center>
                                    <button type="submit" id="commentpost-btn" class="submit">
                                        <i class="iconfont icon-aria-submit"></i>提交
                                    </button>
                                </center>
                            </div>
                        </div>
                    </div><!--评论结束-->

                </div><!-- end #main-->
                <div class="col-mb-12 col-2 kit-hidden-tb">
                    <div id="toc-container">
                        <div id="toc"></div>
                    </div>
                </div>
            </div><!-- end .row -->
        </div><!-- end .container -->
    </div><!-- end #body -->
</div><!-- end #pjax-container -->

<div th:replace="theme/kying/common :: go-top"></div>
<footer th:replace="theme/kying/common :: footer"></footer>

<!--/*/<th:block th:replace="theme/kying/common :: script">/*/-->

<!--/*/</th:block>/*/-->
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
<script>

    function reply(obj) {
        var commentId = $(obj).data("commentid");
        var commentName = $(obj).data("commentnickname");
        $("[name='comment']").attr("placeholder", "@" + commentName).focus();
        $("[name='parentComment.id']").val(commentId);
        $("#cancel-comment-reply-link").css("display","");
        $(window).scrollTo($("#comment"), 500);
    }

    function cancelReply(){
        $("[name='comment']").attr("placeholder", "「你的评论可以一针见血...」").focus();
        $("[name='parentComment.id']").val("-1");
        $("[name='comment']").val('');
        $("#cancel-comment-reply-link").css("display","none");
    }

    $(function () {

        $("#comment-container").load("[[@{/blogs/comments/-999}]]");

        $("#commentQQ").blur(function () {
            if ($("#commentQQ").val() == '' || $("#commentQQ").val() == null) {
            } else {
                $("input[name='nickname']").attr("disabled", "");
                $("input[name='email']").attr("disabled", "");

                $.ajax({
                    url: '/blogs/getAvatar',
                    type: 'post',
                    data: {'qq': $("#commentQQ").val()},
                    success: function (suc) {
                        if (suc.code == 200) {
                            $("#commentavatar").val(suc.data.imgurl);
                            $("#commentavatar").attr("src", suc.data.imgurl);
                            $("input[name='nickname']").val(suc.data.name);
                            $("input[name='email']").val(suc.data.qemail);
                        }
                        $("input[name='nickname']").removeAttr("disabled");
                        $("input[name='email']").removeAttr("disabled");
                    }, error(jqXHR, textStatus, errorThrown) {
                        // 错误信息处理
                        console.error(textStatus, errorThrown)
                    }
                });
            }
        });


        $('#commentpost-btn').click(function () {
            var commentQQ = $("input[name='qq']").val();
            var nickname = $('#nickname').val();
            var email = $('#email').val();
            var comment = $("#comment").val();

            var pattqq = new RegExp("^\\d{5,10}$");
            var pattEmail = new RegExp("\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*");

            if (commentQQ == '' || commentQQ == null || !pattqq.test(commentQQ)) {
                layer.tips('请正确输入QQ号码', '#commentQQ', {
                    tips: [1, '#0FA6D8']
                });
                return false;
            }
            if (nickname == '' || nickname == null){
                layer.tips('请正确输入昵称', '#nickname', {
                    tips: [1, '#0FA6D8']
                });
                return false;
            }
            if (email == '' || email == null || !pattEmail.test(email)){
                layer.tips('请正确输入邮箱', '#email', {
                    tips: [1, '#0FA6D8']
                });
                return false;
            }

            if (comment == '' || comment == null || !comment.trim()) {
                layer.tips('亲，说点什么吧', '#comment', {
                    tips: [1, '#0FA6D8']
                });
                return false;
            }
            $("#commentpost-btn").attr("disabled", "");
            postData();
        });


        function postData() {
            $("#comment-container").load("[[@{/blogs/comments}]]", {
                "parentcommentid": $("[name='parentComment.id']").val(),
                "blogId": $("[name='blogId']").val(),
                "qq": $("input[name='qq']").val(),
                "nickname": $("input[name='nickname']").val(),
                "email": $("input[name='email']").val(),
                "avatar": $("#commentavatar").val(),
                "url": $('#url').val(),
                "comment": $("[name='comment']").val()
            }, function (responseTxt, statusTxt, xhr) {
                if(xhr.status==200){
                    $("#commentpost-btn").removeAttr("disabled");
                    if($("[name='parentComment.id']").val()>-1){
                        let n = $("[name='parentComment.id']").val();
                        $(window).scrollTo($("#comment-"+$("[name='parentComment.id']").val()), 500);
                    }else{
                        $(window).scrollTo($("#comment-container"), 500);
                    }
                    layer.msg('评论成功',{icon: 6});
                }else{
                    layer.msg('评论失败',{icon: 5});
                }
                clearContent();
            })
        }

        function clearContent() {
            $("[name='comment']").val('');
            $("[name='parentComment.id']").val(-1);
            $("[name='comment']").attr("placeholder", "你的评论可以一针见血...");
        }


    });

</script>

</body>
</html>